<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"/><title>Title</title><style>* {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            width: 100vw;

        }
        .toolbar-wrapper {
            height:40px;
            display: flex;
            align-content: center;
            padding:3px 5px;
            box-sizing: border-box;
        }
        .videos {
            height:calc(100% - 40px) !important;
        }</style><script defer="defer" src="CptcRtspPlayer-min.js"></script></head><body><div class="toolbar-wrapper"><span style="margin-top: 5px;">视频流地址：</span> <input style="min-width: 400px;" id="adress" placeholder="请输入视频流地址" value="rtsp://admin:xhb123456@192.168.0.21/cam/realmonitor?channel=1&subtype=0"><div id="aa"></div><button class="" onclick="openPlayer()">打开一个视频</button></div><div id="videos" class="videos"></div></body><script>var isFullScreen = false
    var player = null
    function openPlayer() {
        var url = document.getElementById("adress").value

        console.log(player)
        player.play(url)
        // player.play("http://192.168.0.89:8088/live/test.flv")
        // player.play("rtmp://192.168.0.89:1935/live/test")
        // player.play("rtsp://192.168.0.89:554/live/test")
        // player.play("http://192.168.0.89:9088/live/test.m3u8")
        // player.play("file://d:\\webpack-rtspplayer\\dist\\demo.mp4")
        // player.play("file://d:demo1.mp4")



    }



    window.onload = function () {
        player = new CptcRtspPlayer({
            col: 4,
            row: 4,
            container: "videos",
        });
    }</script></html>